<template>
  <div
    class="page-container animated fadeIn flex column self-center items-center text-center"
  >
    <q-img
      class="page-logo"
      alt="Teknokomo Logo"
      src="~assets/logo.svg"
      fit="contain"
    />
    <FutureButton @click="showLoginForm = true"></FutureButton>

    <span class="page-text02">
      РВМ Универсо путь в гипервселенную — бесконечное пространство исследований
      и взаимодействия. Создавайте цифровые двойники предприятий и городов в
      метавселенных и играйте в уникальные MMORPG, <br />а потом переносите
      достижения в реальный мир.
    </span>
    <div class="bottom-banners-block">
      <div class="flex justify-between" style="max-width: 820px; gap: 20px">
        <template v-for="item of banners" :key="item.text">
          <MainPageBanner
            :text="item.text"
            :color="item.color"
            :action="item.action"
          ></MainPageBanner>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapWritableState } from "pinia";
import { useUiStore } from "src/stores/UI";
import FutureButton from "./buttons/FutureButton.vue";
import MainPageBanner from "./banners/MainPageBanner.vue";
export default {
  name: "NotAuth",
  props: {},
  computed: {
    ...mapWritableState(useUiStore, ["showLoginForm"]),
  },
  components: { FutureButton, MainPageBanner,},

  data() {
    return {
      banners: [
        {
          text: "Космическая MMORPG",
          color: "#4E70C7",
          action: "/mmorpg",
        },
        {
          text: "Общественный Кибергосплан",
          color: "#006868",
          action: "/gosplan",
        },
        {
          text: "Каталог Метавселенных",
          color: "#5E2B4D",
          action: "/metaverses",
        },
        {
          text: "Поддержать на Boosty",
          color: "#f15f2c",
          action: "/",
        },
      ],
    };
  },
};
</script>

<style scoped>
.bottom-banners-block {
  bottom: 16px;
  position: absolute;
}
@media (max-width: 820px) {
  .bottom-banners-block {
    bottom: unset;
    position: unset;
  }
}
.page-logo {
  max-height: 25vh;
  max-width: 25vw;
  justify-self: center;
}

.page-text02 {
  font-size: 28px;
  height: 300px;
}

@media (max-width: 820px) {
  .page-text02 {
    font-size: 24px;
  }
}
@media (max-width: 530px) {
  .page-text02 {
    font-size: 20px;
  }
}
@media (max-width: 400px) {
  .page-text02 {
    font-size: 16px;
  }
}
</style>
